<template>
  <div class="home">
    <div class="line">
      <SkyCardPanel title="代码片段 快速生成组件(点击放大)" @click.native="seeGif('codefg')">
        <div slot="main">

          <img src="~@/assets/codefg.gif" alt="">

        </div>
      </SkyCardPanel>

      <SkyCardPanel title="项目终端 告别命令行(点击放大)" @click.native="seeGif('cmdController')">
        <div slot="main">

          <img src="~@/assets/cmdController.gif" alt="">

        </div>
      </SkyCardPanel>
    </div>
    <div class="line">
      <SkyCardPanel title="一键生成 通用页面模板(点击放大)" @click.native="seeGif('createTemplate')">
        <div slot="main">

          <img src="~@/assets/createTemplate.gif" alt="">

        </div>
      </SkyCardPanel>

      <SkyCardPanel title="清理垃圾 帮助调试代码(点击放大)" @click.native="seeGif('console')">
        <div slot="main">

          <img src="~@/assets/console.gif" alt="">

        </div>
      </SkyCardPanel>
    </div>

    <sky-dialog :DialogShow.sync="DialogShow" title="GIF大图" size="fullscreen">
      <div slot="body" class="sky-dialog-body">
        <img :src="gitsrc" alt="">
      </div>
    </sky-dialog>

  </div>
</template>

<script>

  export default {
    data () {
      return {
        DialogShow: false,
        gitsrc:""
      }
    },
    methods: {
      seeGif (name) {
        this.DialogShow = true
        this.gitsrc=require(`../../assets/${name}.gif`)
      }
    }

  }
</script>

<style lang="scss" scoped>
.line {
  display: flex;
}
.card-wrap{
  width: 50%;
}
img {
  width: 100%;

}
.home /deep/ .sky-dialog-body{
  padding: 15px 50px;
}
.home /deep/ .footer{
  display: none !important;
}
</style>